<!--

  一个一行功能入口的组件

  // 带*号表示必填属性
  props:
    iconWidth:(String || Number)        图标的大小
    *data:(Array)                       展示的数据
        [                               对象数组，每一项其实就是一个qm-entry组件所需要的数据
            {
                *title:(String)           标题
                subTitle:(String)         小标题
                *image:(String)           图标链接
                href:(String)             跳转链接
            }
        ]

  slot:

  demo:
    <qm-navigat-bar class="qm-navigat-bar" :data="navigatBar"></qm-navigat-bar>

    data(){
      return {
        navigatBar: [
            {
            image: "static/img/home/icon-home-fun1.png",
            title: "随机巡查",
            href: "/business/index",
            },
            { image: "static/img/home/icon-home-fun2.png", title: "巡查任务" },
            { image: "static/img/home/icon-home-fun3.png", title: "巡查轨迹" },
            { image: "static/img/home/icon-home-fun4.png", title: "任务派单" },
            ...
        ],
      }
    }

-->



<template>
  <f7-block class="qm-navigat-bar">
      <qm-entry v-for="(item, index) in data" class="qm-navigat-bar-item"
        :key="index" :data="item" :iconWidth="iconWidth"></qm-entry>
    </f7-block>
</template>

<script>
export default {
props: {
    data: {
        type: Array
    },
    iconWidth: {
        type: String | Number,
        default: "86"
    }
}
}
</script>

<style lang="less" scoped>
.qm-navigat-bar{
    // width: calc(100% - calc(32px * 2 * var(--ratio)));
    height: calc(203px * var(--ratio));
    background: var(--color-fill-grey-inverse);
    box-shadow: 0px 10px 20px 0px rgba(64, 121, 184, 0.08);
    margin: 0 calc(32px * var(--ratio));
    border-radius: calc(16px * var(--ratio));
    display: flex;
    align-items: center;
    // justify-content: space-between;
    justify-content: space-around;
    padding: 0;
}
</style>
